<template>
	<view class="orderPage">
		<!-- 		<u-empty v-if="!dataList.length" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty> -->
		<view class="nonePic" v-if="display|| !dataList.length">
			<image class="img" mode="aspectFill" src="../../static/image/none.png"></image>
			<text>暂无订单</text>
		</view>
		<view v-else class="row" v-for="item in dataList" @click="toDetail(item.id)">
			<view class="head">
				<view class="number">
					订单编号:{{item.id}}
					<!-- <text class="way">商家外送</text> -->
				</view>
			</view>
			<view class="body">
				<view class="list">
					<view class="every" v-for="i in item.content.carList">
						{{i.name}}×{{i.num}}
					</view>
				</view>
				<view class="state">
					<u-icon v-if="item.way=='wxpay'" name="weixin-fill" size="22" color="#04C15F"></u-icon>
					<u-icon v-if="item.way=='alipay'" name="zhifubao" size="26" color="#1578ff"></u-icon>
					<text>已支付</text>
				</view>
			</view>
			<view class="footer">
				<view class="time">
					{{item.time}}
				</view>
				<view class="count">
					共{{item.goodnum}}件商品|实付<text class="price">￥{{item.cost}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		GetStroage,
		timeInterval
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				userInfo: {},
				dataList: [],
				display: false
			};
		},
		onLoad() {
			this.display = true;
			let result = GetStroage("userInfo");
			if (result) {
				this.userInfo = result;
				this.getData(this.userInfo.id);
				this.display = false;
			}
		},
		methods: {
			toDetail(index) {
				uni.navigateTo({
					url: "/pages_shop/order/detail?id=" + index,
				})
			},
			getData(index) { //查找用户的所有订单
				uni.request({
					url: this.$e.Url + "/order/userGetAll",
					data: {
						uid: index
					},
					header: {
						"Content-Type": "application/json"
					},
					method: 'GET',
					success: (res) => {
						console.log("请求API接口【/order/userGetAll】", res);
						this.dataList = res.data;
						for (let i = 0; i < this.dataList.length; i++) {
							this.dataList[i].content = JSON.parse(this.dataList[i].content);
							this.dataList[i].time = timeInterval(this.dataList[i].time);
						}
						console.log("获取用户的订单:", this.dataList);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	.orderPage {
		.nonePic {
			margin: 0 auto;
			width: 300rpx;
			height: 300rpx;

			.img {
				width: 100%;
				height: 100%;
			}

			text {
				@include flex-box-set();
				color: $text-font-color-3;
			}
		}

		.row {
			background: #ffffff;
			margin: 30rpx 15rpx;
			padding: 15rpx;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx 10rpx rgba(230, 230, 230, 0.3);

			.head {
				@include flex-box();

				.number {
					@flex-box-set(start);
					font-size: 30rpx;

					.way {
						background: #19be6b;
						color: #ffffff;
						padding: 10rpx;
						font-size: 22rpx;
						border-radius: 10%;
						margin: 0rpx 0 0 20rpx;
					}
				}


			}

			.body {
				@include flex-box(); //两端对齐
				border: 5rpx solid rgba(184, 177, 188, 0.8);
				// box-shadow: 0 0 10rpx 10rpx rgba(248, 248, 248, 0.8);
				border-radius: 10rpx;
				margin: 20rpx 0 10rpx;
				padding: 30rpx;
				background: $page-bg-color;

				.state {
					@include flex-box-set();
				}
			}

			.footer {
				@include flex-box();

				.time {
					color: $text-font-color-2;
				}

				.count {
					color: $text-font-color-2;

					.price {
						color: $price-color;
						font-size: 40rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
